import React, { useCallback, useMemo } from 'react';
import { useDndContext } from '@dnd-kit/core';
import { DraggableItem, Wrapper, DraggableOverlay } from '../../components';
import { vesselList } from '../../internals/mock';

interface IProps {}

function ContainerTpl(props: IProps) {
  const {} = props;
  const { active } = useDndContext();

  const handleShowElement = useCallback((vesselId) => {
    return <span>{vesselId}</span>;
  }, []);

  const activeData = useMemo(() => {
    return vesselList.filter((item) => active?.id === item.id)[0];
  }, [active?.id]);

  return (
    <div>
      {vesselList.map((item) => {
        return (
          <Wrapper key={item.id}>
            <DraggableItem
              id={item.id}
              handle
              label=""
              showElement={handleShowElement(item.vesselId)}
              draggableData={{ type: item.type }}
            />
          </Wrapper>
        );
      })}
      {/* <DraggableOverlay showElement={activeData?.vesselId || ''} /> */}
    </div>
  );
}

export default ContainerTpl;
